/**
 * 内容： 文本
 * 大多数的Three.js示例中用于添加描述性叠加文字的方法:
 * <div id="info">Description</div>
 * #info {
	position: absolute;
	top: 10px;
	width: 100%;
	text-align: center;
	z-index: 100;
	display:block;
}
 */
import * as THREE from "../../three/three.module.js";
import { FontLoader } from '../../three/addons/loaders/FontLoader.js';
import { TextGeometry } from '../../three/addons/geometries/TextGeometry.js';

THREE.Cache.enabled = true;
// 场景
var scene = new THREE.Scene();
scene.background = new THREE.Color( 0x000000 );
scene.fog = new THREE.Fog( 0x000000, 250, 1400 );
// 添加光源
// 点光源
var spotLight = new THREE.SpotLight(0xffffff,0.125);// color, intensity
spotLight.position.set(0,1,1).normalize();
scene.add(spotLight);
// 直射光
const dirLight = new THREE.DirectionalLight( 0xffffff, 0.125 );
dirLight.position.set( 0, 0, 1 ).normalize();
scene.add( dirLight );

// 相机
var camera = new THREE.PerspectiveCamera(// 透视摄像机
    30,//视野角度（FOV）
    window.innerWidth/window.innerHeight,// 长宽比（aspect ratio）
    1,// 近截面（near）,比这个更近的不显示
    1500// 远截面（far），比这个更远的不显示
)
camera.position.set(0,400,700);
let cameraTarget = new THREE.Vector3( 0, 150, 0 );

// 渲染器
var renderer = new THREE.WebGLRenderer({
    antialias: true
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

let font;
loadFont();
function loadFont() {
    const loader = new FontLoader();
    loader.load( 'fonts/optimer_bold.typeface.json', function ( response ) {
        font = response;
    } );

}

let materials = [
    new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
    new THREE.MeshPhongMaterial( { color: 0xffffff } ) // side
];

let group= new THREE.Group();
group.position.y = 100;
scene.add( group );

const plane = new THREE.Mesh(
    new THREE.PlaneGeometry( 10000, 10000 ),
    new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 0.5, transparent: true } )
);
plane.position.y = 100;
plane.rotation.x = - Math.PI / 2;
scene.add( plane );

function createText() {
    // 第一个顶点和最后一个顶点之间不会绘制线条,所以线条不闭合
    var textGeo = new TextGeometry("Hello, ThreeJS",{
        font: font,
        size: 80,
        height: 20,
        curveSegments: 4,
        bevelThickness: 2,
        bevelSize: 1.5,
        bevelEnabled: true

    });
    textGeo.computeBoundingBox();

    const centerOffset = - 0.5 * ( textGeo.boundingBox.max.x - textGeo.boundingBox.min.x );

    let textMesh1 = new THREE.Mesh( textGeo, materials );

    textMesh1.position.x = centerOffset;
    // textMesh1.position.y = hover;
    textMesh1.position.z = 0;

    textMesh1.rotation.x = 0;
    textMesh1.rotation.y = Math.PI * 2;
    group.add( textMesh1 );
}

// 渲染循环 render loop
function animate(){
    // requestAnimationFrame 当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命
    requestAnimationFrame(animate);
    camera.lookAt( cameraTarget );
    renderer.clear();
    createText();
    renderer.render(scene, camera);
}
export { animate }